---
title: AstroでBunを使う
description: AstroサイトでのBunの使い方を紹介します。
type: recipe
i18nReady: true
---

[Bun](https://bun.sh/)はオールインワンのJavaScriptランタイム＆ツールキットです。詳しくは[Bunのドキュメント](https://bun.sh/docs)を参照してください。

:::caution
BunをAstroと一緒に使うと、荒削りな部分が見えてくるかもしれません。いくつかのインテグレーションは期待通りに動作しないかもしれません。詳しくは[BunのAstroとの連携に関する公式ドキュメント](https://bun.sh/guides/ecosystem/astro)を参照してください。

Bunを使用していて何か問題がある場合は、[GitHubのBunのリポジトリに直接Issueを開いてください](https://github.com/oven-sh/bun/issues/new/choose)。
:::

## 前提条件

- あなたのマシンにローカルにBunがインストールされていること。Bunの公式ドキュメントの[インストール手順](https://bun.sh/docs/installation)を参照してください。

## Bunで新しいAstroプロジェクトを作成する

以下の`create-astro`コマンドを使用して、Bunで新しいAstroプロジェクトを作成します。

```bash
bunx create-astro@latest my-astro-project-using-bun
```

:::tip
また、`--template`フラグを使用して、[既存のAstro GitHubリポジトリから新しいAstroプロジェクトを作成する](/ja/install-and-setup/#テーマやスターターテンプレートを使用する)こともできます。
```bash
bunx create-astro@latest my-astro-project-using-bun --template eliancodes/brutal
```
:::

## 依存関係のインストール

`bunx create-astro`を使用して新しいプロジェクトを開始する場合、CLIは自動的にBunを使用して依存関係をインストールするので、この手順を省略することができます。

そうでない場合は、Bunで依存関係をインストールする必要があります。

```bash
bun install
```

## 型の追加

Bunは[`@types/bun`](https://www.npmjs.com/package/@types/bun)パッケージを公開しており、Bunのランタイム型が含まれています。

以下のコマンドを使って`@types/bun`をインストールしてください。

```sh
bun add -d @types/bun
```

## Astroインテグレーションを使う

`Astro add`コマンドにより、Astroの公式インテグレーションも使えます。

```bash
bunx astro add react
```

## BunでAstroを実行する

:::note
Nodeの代わりにBun独自のランタイムを使用するには、すべての`astro`コマンドの前に[`--bun` CLIフラグ](https://bun.sh/docs/cli/bunx#shebangs)を指定します。
:::

### 開発サーバーの実行

Bunをランタイムとして開発サーバーを実行するには、以下のコマンドを使用します。

```bash
bunx --bun astro dev
```

### Bunでサイトをビルドする

Bunをランタイムとして使用してサイトをビルドするには、次のコマンドを使用します。

```bash
bunx --bun astro build
```

Astroはあなたのサイトを`dist/`ディレクトリに出力します。その後、`preview`コマンドを使ってサイトを表示することができます。

```bash
bunx --bun astro preview
```

## `astrojs/node`を使ってBunでSSRをおこなう

Bunは[Node.js APIとの互換性](https://bun.sh/docs/runtime/nodejs-apis)があります。[`astrojs/node`](/ja/guides/integrations-guide/node/)アダプターを使用すると、BunのランタイムをNodeの代わりに使用して、[サーバーサイドレンダリング](/ja/guides/on-demand-rendering/)をAstroプロジェクトに追加できます。

次のコマンドを実行して、Node.jsアダプターをAstroプロジェクトに追加します。

```bash
bunx astro add node
```

上記と同じビルドコマンドを使用して、サイトを再度ビルドします。

```bash
bunx --bun astro build
```
最後に、以下のコマンドを使ってビルドしたサイトを実行します。

```bash
bun ./dist/server/entry.mjs
```

## 公式リソース

- [AstroとBunでアプリを作る](https://bun.sh/guides/ecosystem/astro)

## コミュニティー・リソース

AstroでBunを使っていますか？このページにブログ記事やビデオを追加してください！

- [BunでCloudflare Pagesサイトを構築する](https://blog.otterlord.dev/posts/hello-from-bun/) - ブログ記事
